<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     h3{ text-align: center; }
        #progress { height: 20px; width: 500px; margin: 10px 0; border: 1px solid gold; position: relative; }
        #progress .progress-item { height: 100%; position: absolute; left: 0; top: 0; background: chartreuse;  transition: width .3s linear; }
        .imgdiv{ width: 400px; text-align: center; display: none; }
        .imgdiv img{ width: 100%; }
    </style>
</head>
<body>
    <h1>上传文化</h1>
    <!-- <img src="./images/未标题-1.png" alt=""> -->
    <input type="file" id="file" accept="image/*" multiple>  <!-- 只上传图片格式 上传多个 --> 
    <div style="margin:5px 0">上传进度：</div>
    <div id="progress">
        <div class="progress-item"></div>
    </div>
    <p class="status"></p>
    <div class="imgdiv">
        <img src="" alt="" class="imgbox">
    </div>
    <div class="bbt">
        <button class="btn" style="display: none;">压缩</button>
    </div>

    <script>
        document.querySelector('#file')
        .addEventListener('change',function(){
            // file 对象
            // es6以前不可以 ，文件属于系统
            // 上传到服务器端处理
            // html5 File对象 文件能力 上传到服务器得到文件信息
            var file=this.files[0];
            // console.log(file,'===');
            var formdata = new FormData() // 表单数据
            formdata.append('file',file);
            const xhr=new XMLHttpRequest();
            xhr.open("post","http://localhost:6300/uploadPic/");
            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.querySelector('.btn').style.display='block';
                    document.querySelector('.status').style.display='block';
                    document.querySelector('.status').innerHTML=xhr.responseText;
                }
            }
            xhr.upload.onprogress=function (event){
                if(event.lengthComputable){
                    let percent=event.loaded / event.total * 100;
                    document.querySelector('#progress .progress-item')
                    .style.width=percent + '%';
                }
            }
            xhr.send(formdata);

        })
        document.querySelector('.btn')
        .addEventListener('click',function(){
            document.querySelector('.status').innerText = '等待中';
            var xhr = new XMLHttpRequest();
            xhr.open('get','http://localhost:6300/zipimg/');
            xhr.send();
            xhr.onreadystatechange=function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    
                }
            }
        })
    </script>
</body>
</html>